<template>
	<!-- 支付方式弹窗 -->
	<view class="payment-popup" :class="{ show: show }">
		<view class="payment-popup-container">
			<image class="payment-popup-head" src="@/static/images/payment/payment-head.png" mode="aspectFit"></image>
			<view class="payment-popup-body">
				<view class="payment-popup-btn alipay" @tap="clickPayTypeBtn" :data-pay-type="payType.ALIPAY.value" v-if="canAlipay">支付宝支付</view>
				<view class="payment-popup-btn wxpay" @tap="clickPayTypeBtn" :data-pay-type="payType.WECHAT.value" v-if="canWxpay">微信支付</view>
				<view class="payment-popup-btn balance" @tap="clickPayTypeBtn" :data-pay-type="payType.BALANCE.value" v-if="canBalance">余额支付</view>
			</view>
			<image @tap.stop="closePayment" class="payment-popup-close" src="@/static/images/payment/payment-close.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import PayTypeEnum from '@/utils/enum/order/PayType.js';
export default {
	props: {
		source: {
			type: String,
			default: 'order'
		}
	},
	data() {
		return {
			payType: this.$u.deepClone(PayTypeEnum),
			canAlipay: false,
			canWxpay: false,
			canBalance: false,
			show: false
		};
	},
	created() {
		// #ifdef APP-VUE
		// uni.getProvider({
		// 	service: 'payment',
		// 	success: result => {
		// 		const provider = result.provider;
		// 		this.canAlipay = this.canAlipay && provider.indexOf('alipay') >= 0;
		// 		this.canWxpay = this.canWxpay && provider.indexOf('wxpay') >= 0;
		// 	}
		// });
		// #endif
		this.$u.api
			.getPaymentList(this.source)
			.then(res => {
				const paymentList = res.data.list;
				if (paymentList.length == 0) {
					Tools.showError('不支持任何支付方式', () => {
						this.closePayment();
					});
				} else if (paymentList.length == 1) {
					this.confirmPayType(paymentList[0].pay_code)
				} else {
					for (let i = 0; i < paymentList.length; i++) {
						switch (paymentList[i].pay_code) {
							case 10:
								this.canBalance = true;
								break;
							case 20:
								this.canWxpay = true;
								break;
							case 30:
								this.canAlipay = true;
								break;
							default:
								break;
						}
					}
					this.show = true;
				}
			})
			.catch(e => {
				this.closePayment();
			});
	},
	methods: {
		closePayment() {
			this.$emit('close');
		},
		clickPayTypeBtn(e) {
			this.confirmPayType(e.currentTarget.dataset.payType)
		},
		confirmPayType(pay_type) {
			this.$emit('confirm', {
				pay_type
			});
		}
	}
};
</script>

<style lang="scss">
//支付渠道弹窗
.payment-popup {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 100vh;
	background: rgba(0, 0, 0, 0.2);
	z-index: 9999;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s ease-in;
	&.show {
		opacity: 1;
	}
	.payment-popup-container {
		margin-top: -120rpx;
		width: 580rpx;
		flex-shrink: 0;
		position: relative;
		.payment-popup-close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 29rpx;
			top: 180rpx;
		}
		.payment-popup-head {
			width: 580rpx;
			height: 388rpx;
			display: block;
		}
		.payment-popup-body {
			width: 580rpx;
			background-color: #fff;
			padding: 24rpx 30rpx 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-bottom-left-radius: 28rpx;
			border-bottom-right-radius: 28rpx;
			.payment-popup-btn {
				width: 100%;
				height: 90rpx;
				border-radius: 45rpx;
				margin-bottom: 24rpx;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				&.alipay {
					background: rgba(0, 145, 255, 1);
				}
				&.wxpay {
					background: rgba(77, 201, 121, 1);
				}
				&.balance {
					background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
				}
			}
		}
	}
}
</style>
